<ui:composition template="/template/templateSGRUsuario.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:param name="nombreparam" value="reserva" />
    <ui:param name="duracionparam" value="7000" />
    <ui:param name="efectshowparam" value="fade" />
    <ui:param name="efecthideparam" value="fade" />
    <ui:define name="index">
        <h:form id="ReservaForm" >
            <article id="content">
                <div class="wrap">
                    <div class="box">
                        <div>
                            <h2 class="letter_spacing">Reserva <span>tu mesa en Deliccio</span></h2>

                            <p:growl id="growldel#{nombreparam}" widgetVar="wvgrowldel#{nombreparam}"
                                     autoUpdate="false" showDetail="false" life="#{duracionparam}" />

                            <c:if test="#{sesion.activa}">

                                <div style="border: 0px; width: 40%; float: left;">
                                    <h2 class="letter_spacing"></h2>
                                    <ul style="list-style-type: disc; margin-left: 30px;">
                                        <li><h:outputText value="Seleccionar cantidad de comensales"/></li>
                                        <li><h:outputText value="Seleccione una fecha"/></li>
                                        <li><h:outputText value="Seleccione un horario (Mañana de 10:00 a 12:00 hs, Medio día de 12:00 a 14:00 hs, Tarde de 14:00 a 19:00 hs y Noche de 19:00 a 24:00 hs)"/></li>
                                        <li><h:outputText value="Es así de facil! si tienes alguna duda siempre puedes llamar al restaurante."/></li>
                                    </ul>
                                </div>

                                <div style="border: 0px; width: 51%; float: right;">
                                    <h:panelGrid columns="2" id="paneldialogogriddata#{nombreparam}" styleClass="grid-modal">

                                        <h:outputLabel value="(*)Cantidad de Comensales:"/>
                                        <h:column>
                                            <p:spinner id="comensales#{nombreparam}" value="#{pCReserva.temporal.cantidad}"
                                                       min="1" max="12" size="3" required="true" label="Cantidad de Comensales" 
                                                       validatorMessage="La cantidad de comensales que puede seleccionar debe ser un número entre 1 y 12. Para más de 12 comensales, solicitar la reserva telefónicamente"
                                                       requiredMessage="La cantidad de comensales debe ser mayor que 0">
                                                <f:validateLongRange minimum="1" maximum="12" />
                                            </p:spinner>
                                        </h:column>

                                        <h:outputLabel value="(*)Fecha:"/>
                                        <h:column>
                                            <p:calendar  title="Selecciona una fecha" styleClass="miCal" id="fecha#{nombreparam}" size="10" value="#{pCReserva.fecha}" pattern="dd/MM/yyyy" locale="es"
                                                         maxlength="10" label="Fecha" navigator="false" effect="explode" required="true" showOn="button" 
                                                         mindate="#{pCReserva.fechaActual}" readonlyInput="true" requiredMessage="El campo Fecha es obligatrio">
                                                <p:ajax event="dateSelect" update="horario#{nombreparam}" partialSubmit="fecha#{nombreparam}"
                                                        listener="#{pCReserva.establecerHorarios()}"/>
                                            </p:calendar>
                                        </h:column>

                                        <h:outputLabel value="(*)Horario:"/>
                                        <h:column>
                                            <p:selectOneMenu style="margin-left:3px" id="horario#{nombreparam}" value="#{pCReserva.temporal.horario}" required="true" 
                                                             requiredMessage="Debe seleccionar un horario">
                                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
                                                <f:selectItems value="#{pCReserva.horarios.entrySet()}" var="entry"
                                                               itemValue="#{entry.key}" itemLabel="#{entry.value}" />
                                            </p:selectOneMenu>
                                        </h:column>

                                        <h:outputLabel value="Comentarios:" style="margin-left:18px"/>
                                        <h:column>
                                            <p:inputTextarea cols="32" rows="4" autoResize="false" maxlength="255" 
                                                             id="comentario#{nombreparam}"
                                                             counterTemplate="{0} caracteres restantes" counter="contador"
                                                             value="#{pCReserva.temporal.comentario}"/>
                                            <h:panelGroup layout="block" id="x2#{nombreparam}">
                                                <h:outputText id="contador" style="font-size: 10px; margin-left: 5px;"/>
                                            </h:panelGroup>
                                        </h:column>

                                    </h:panelGrid>

                                    <p:commandLink update="growldel#{nombreparam} paneldialogogriddata#{nombreparam}" 
                                                   action="#{pCReserva.reservarCliente(nombreparam)}" 
                                                   style="margin-left:194px;margin-top: 15px;" styleClass="button1">  
                                        <h:outputText value="Reservar" />  
                                    </p:commandLink>

                                </div>

                            </c:if>

                            <c:if test="#{!sesion.activa}">
                                <p:outputLabel value="Para realizar una reserva debe "/>
                                <h:link outcome="login" value="Iniciar Sesión"/>
                            </c:if>

                        </div>
                    </div>
                </div>
            </article>
        </h:form>
    </ui:define> 
</ui:composition>
